import { VxeUI } from 'vxe-pc-ui';
import { ElButton } from 'element-plus';

// 工具栏按钮
VxeUI.renderer.add('RaElButtonRender', {
  renderToolbarButton(renderOpts, params) {
    // 结构参数
    const { button } = params;
    const { events } = renderOpts;

    // 创建动态属性对象，包含所有按钮属性
    const buttonProps = { ...button };

    // 需要兼容 vxe-table配置属性
    buttonProps.type = button.status;

    // 移除我们特别处理的属性，避免重复设置
    delete buttonProps.name;
    delete buttonProps.icon;

    // 定义点击事件处理器
    const handleClick = (event) => {
      if (events && events.click) {
        events.click(event, params);
      }
      // 调用按钮自定义的click回调（如果存在）
      if (button.onClick && typeof button.onClick === 'function') {
        button.onClick(event, params);
      }
    };

    // 添加点击事件处理器到属性对象
    buttonProps.onClick = handleClick;

    /**
     * 按钮图标可设置el图标和svg图标
     * 如果设置svg图标，需要按照格式 svg-filename 配置（设置图标时，数据库存储的是filename）
     * 在这里根据是否有svg-前缀，自动更换为 icon-
     * el 图标则按照数据库存储的设置值 诸如 el-icon-User 直接配置即可
     * 按钮、菜单配置的图标以el为主，svg为补充，其余图标暂未引入
     * 下面是设置按钮图标的一个例子
     *  icon: 'svg-client', // svg图标
     *  icon: 'User', // svg图标
     */
    if (typeof button.icon === 'string' && button.icon.startsWith('svg-')) {
      // 自定义 SVG 图标
      const iconName = '#' + button.icon.replace('svg-', 'icon-');
      return (
        <ElButton
          {...buttonProps} // 展开所有按钮属性
        >
          <svg class="button-svg-icon">
            <use xlinkHref={iconName} />
          </svg>
          {button.name}
        </ElButton>
      );
    } else {
      // 确保图标属性传递给ElButton
      buttonProps.icon = button.icon;
      return (
        <ElButton
          {...buttonProps} // 展开所有按钮属性
        >
          {button.name}
        </ElButton>
      );
    }
  },
});
